<template>
  <div class="JobDetails1">
    <NavBar
      fixed
      placeholder
      title="详情"
      z-index="999"
      @click-right="onClickRight"
      ref="nav"
    >
      <template #left>
        <Icon
          name="arrow-left"
          size="0.53rem"
          color="#000"
          @click="$router.back()"
        />
      </template>
    </NavBar>
    <div style="position: relative">
      <img class="bgc" src="../../../assets/img/card.png" alt="" />
      <img
        class="bg-img2"
        v-if="info.dgwkStatus == '待签发'"
        src="../../../assets/img/daiqianfa.png"
        alt=""
      />
      <img
        class="bg-img2"
        v-if="info.dgwkStatus == '新建'"
        src="../../../assets/img/xj.png"
        alt=""
      />
      <img
        class="bg-img2"
        v-if="info.dgwkStatus == '待现场审核'"
        src="../../../assets/img/dxcsh.png"
        alt=""
      />
      <img
        class="bg-img2"
        v-if="info.dgwkStatus == '作业中'"
        src="../../../assets/img/zyz.png"
        alt=""
      />
      <img
        class="bg-img2"
        v-if="info.dgwkStatus == '已终结'"
        src="../../../assets/img/yzj.png"
        alt=""
      />
      <img
        class="bg-img2"
        v-if="info.dgwkStatus == '已作废'"
        src="../../../assets/img/yzf.png"
        alt=""
      />
      <div class="header">
        <div class="state">任务状态-{{ info.dgwkStatus }}</div>
        <div class="id">作业编号：{{ info.id }}</div>
      </div>
      <div class="main">
        <div class="card">
          <Cell v-if="'title' in info" title="标题" :value="info.title" />
          <Cell
            v-if="'dgwkDegree' in info"
            title="紧急程度"
            :value="info.dgwkDegree"
          />
          <Cell
            v-if="'dgwkLevel' in info"
            title="作业级别"
            :value="info.dgwkLevel"
          />
          <Cell
            v-if="'dgwkRespon' in info"
            title="作业负责人"
            :value="info.dgwkRespon"
          />
          <Cell v-if="'tel' in info" title="联系方式" :value="info.tel" />
          <Cell
            v-if="'dgwkLoad' in info"
            title="所需负荷"
            :value="info.dgwkLoad"
          />
          <Cell
            v-if="'startDtm' in info"
            title="作业开始时间"
            :value="info.startDtm"
          />
          <Cell
            v-if="'endDtm' in info"
            title="作业结束时间"
            :value="info.endDtm"
          />
          <Cell
            v-if="'dgwkJobSite' in info"
            title="作业部位"
            :value="info.dgwkJobSite"
          />
          <Cell
            v-if="'dgwkOtherWork' in info"
            title="涉及的其他危险作业"
            :value="info.dgwkOtherWork"
          />
          <Cell
            v-if="'dgwkReason' in info"
            title="断路原因"
            :value="info.dgwkReason"
          />
          <Cell
            v-if="'dgwkUseArea' in info"
            title="使用区域"
            :value="info.dgwkUseArea"
          />
          <Cell
            v-if="'dgwkDraft' in info"
            title="断路草图"
            :value="info.dgwkDraft"
          />
          <Image width="100" height="100" :src="info.dgwkDraft" />
          <Cell
            v-if="'dgwkWorkArea' in info"
            title="作业区域"
            :value="info.dgwkWorkArea"
          />
          <Cell
            v-if="'dgwkPosition' in info"
            title="作业位置"
            :value="info.dgwkPosition"
          />
          <div v-if="'dgwkContent' in info" class="t">作业内容</div>
          <textarea
            v-if="'dgwkContent' in info"
            readonly
            cols="30"
            rows="10"
            v-model="info.dgwkContent"
          ></textarea>
        </div>

        <div class="card card2">
          <Cell v-if="'dcuNam' in info" title="施工单位" :value="info.dcuNam" />
          <Cell
            v-if="'dcuPerson' in info"
            title="施工负责人"
            :value="info.dcuPerson"
          />
          <Cell
            v-if="'dcuTel' in info"
            title="施工单位联系方式"
            :value="info.dcuTel"
          />
          <Cell
            v-if="'dgwkPerson' in info"
            title="作业人员"
            :value="info.dgwkPerson"
          />
          <Cell
            v-if="'dgwkOperSuper' in info"
            title="作业监护人"
            :value="info.dgwkOperSuper"
          />
          <Cell
            v-if="'dgwkConsSuper' in info"
            title="施工单位监管人"
            :value="info.dgwkConsSuper"
          />

          <Cell v-if="'dgwkRisk' in info" title="风险分析"> </Cell>
          <div class="radios">
            <Radio
              class="radio"
              v-for="(item, i) in info.dgwkRisk"
              :key="i"
              disabled
            >
              {{ item }}
            </Radio>
          </div>
          <div
            class="otherIpt"
            v-if="'dgwkOtherRisk' in info && info.dgwkOtherRisk.length > 0"
          >
            {{ info.dgwkOtherRisk }}
          </div>

          <Cell v-if="'dgwkRiskWay' in info" title="风险与措施"> </Cell>
          <div v-if="'dgwkRiskWay' in info" class="radios">
            <Radio
              class="radio"
              v-for="(item1, i1) in info.dgwkRiskWay"
              :key="i1"
              :name="item1"
              disabled
            >
              {{ item1 }}
            </Radio>
          </div>
          <div v-if="'dgwkRiskWay' in info" class="radios">
            <Radio
              class="radio"
              v-for="(item2, i2) in info.dgwkSafeWay"
              :key="i2"
              :name="item2"
              disabled
            >
              {{ item2 }}
            </Radio>
          </div>

          <Cell v-if="'dgwkWay' in info" title="动火方式"> </Cell>
          <div v-if="'dgwkWay' in info" class="radios">
            <Radio
              class="radio"
              v-for="(item3, i3) in info.dgwkWay"
              :key="i3"
              :name="item3"
              disabled
            >
              {{ item3 }}
            </Radio>
          </div>

          <Cell v-if="'dgwkSafe' in info" title="安全措施确认" />
          <div v-if="'dgwkSafe' in info" class="radios">
            <Radio
              class="radio"
              v-for="(item4, i4) in info.dgwkSafe"
              :key="i4"
              :name="item4"
              disabled
            >
              {{ item4 }}
            </Radio>
          </div>
          <div
            class="otherIpt"
            v-if="'dgwkOtherSafe' in info && info.dgwkOtherSafe.length > 0"
          >
            {{ info.dgwkOtherSafe }}
          </div>
          <Cell
            v-if="'applyUnit' in info"
            title="断路申请单位补充的安全措施补充"
          />
          <textarea
            v-if="'applyUnit' in info"
            v-model="info.applyUnit"
            cols="30"
            rows="10"
          ></textarea>
          <Cell
            v-if="'workUnit' in info"
            title="断路作业单位补充的安全措施补充"
          />
          <textarea
            v-if="'workUnit' in info"
            v-model="info.workUnit"
            cols="30"
            rows="10"
          ></textarea>
          <!-- :src="/nhw/ + item" -->
          <Cell title="施工方案" v-if="info.constPlan.length > 0" />
          <VanImage
            v-for="(item1, i1) in info.constPlan"
            :key="i1"
            :src="/nhw/ + item1"
            width="150"
            height="150"
            class="images"
          ></VanImage>
          <Cell title="人员资质" v-if="info.personInte.length > 0" />
          <VanImage
            v-for="(item2, i2) in info.personInte"
            :key="i2"
            :src="/nhw/ + item2"
            width="150"
            height="150"
            class="images"
          ></VanImage>
          <Cell title="施工单位资质" v-if="info.constUnit.length > 0" />
          <VanImage
            v-for="(item3, i3) in info.constUnit"
            :key="i3"
            :src="/nhw/ + item3"
            width="150"
            height="150"
            class="images"
          ></VanImage>
          <Cell title="安全交底书" v-if="info.measures.length > 0" />
          <VanImage
            v-for="(item4, i4) in info.measures"
            :key="i4"
            :src="/nhw/ + item4"
            width="150"
            height="150"
            class="images"
          ></VanImage>
          <Cell title="其他" v-if="info.other.length > 0" />
          <VanImage
            v-for="(item5, i5) in info.other"
            :key="i5"
            :src="/nhw/ + item5"
            width="150"
            height="150"
            class="images"
          ></VanImage>
          <Cell title="现场布置照片" v-if="info.sitePhoto.length > 0" />
          <VanImage
            v-for="(item6, i6) in info.sitePhoto"
            :key="i6"
            :src="/nhw/ + item6"
            width="150"
            height="150"
            class="images"
          ></VanImage>
          <Cell title="验收照片" v-if="info.accePic.length > 0" />
          <VanImage
            v-for="(item7, i7) in info.accePic"
            :key="i7"
            :src="/nhw/ + item7"
            width="150"
            height="150"
            class="images"
          ></VanImage>
        </div>
      </div>
    </div>

    <!-- <div class="drag" @click="toJump1">
      <Icon name="todo-list-o" size="40"></Icon>
      <span>查看流程</span>
    </div> -->
    <SideBtn
      :to="{
        name: 'WorkflowSteps',
        params: {
          workflowId: $route.query.dgwkName,
          pkValue: $route.query.dgwkNo,
        },
      }"
    />
  </div>
</template>

<script>
import { WhenHotDetails } from "@/api/work.js";
import Layout from "components/Layout";
import SideBtn from "components/SideBtn";
import {
  NavBar,
  Icon,
  Field,
  Cell,
  Uploader,
  Button,
  RadioGroup,
  Radio,
  Image as VanImage,
} from "vant";
export default {
  name: "JobDetails1",

  components: {
    SideBtn,
    Uploader,
    Layout,
    NavBar,
    Icon,
    Field,
    Cell,
    Button,
    RadioGroup,
    Radio,
    Image,
    VanImage,
  },

  directives: {},

  data() {
    return {
      title: "标题",
      lv: "请选择作业级别",
      head: "请选择作业负责人",
      startTime: "请选择作业开始时间",
      endTime: "请选择作业结束时间",
      area: "请选择作业区域",
      location: "请选择作业位置",
      ConstructionUnit: "请选择施工单位",
      user: "石丽丽",
      phone: "15651789361",
      RiskAnalysis: "请选择施工单位",
      hot: "请选择动火方式",
      measures: "请选择安全措施确认",
      content: "aaa",
      fileList: [],
      radio1: "1",
      radio2: "1",
      radio3: "1",
      info: {},
    };
  },

  mounted() {
    this.getInfo();
  },

  methods: {
    async getInfo() {
      const { value } = await WhenHotDetails(this.$route.query);
      console.log("data", value);
      this.info = value;
    },

    //扫一扫事件

    toJump1() {
      console.log(1);
      this.$router.push({
        path: "SnapshotSteps",
        query: {},
      });
    },
    onClickLeft() {},
    onClickRight() {},
    toRecordsList() {
      this.$router.push({
        path: "RecordsList",
        query: {},
      });
    },
    onSumbit() {
      this.$router.push({
        path: "WorkRecord",
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/style/var.less";
.JobDetails1 {
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  background-color: #f7f7f9;
  // padding: 30px 0;
  // /deep/.van-nav-bar__content {
  //   background-color: #3982f6;

  //   .van-nav-bar__title {
  //     color: #fff;
  //   }
  // }
  .bgc {
    position: absolute;
    width: 100%;
  }
  .bg-img2 {
    z-index: 99;
    width: 200px;
    height: 200px;
    position: absolute;
    right: 24px;
    top: 50px;
  }
  .header {
    width: 100%;
    height: 190px;
    color: #edf0f5;
    padding-left: 20px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    .state {
      font-size: 48px;
      z-index: 99;
    }
    .id {
      font-size: 26px;
      z-index: 99;
    }
  }

  .main {
    padding-bottom: 150px;
    background-color: #fff;
    .search-icon {
      color: #3982f6;
      margin-top: 8px;
      margin-left: 8px;
    }
    .t {
      font-size: 28px;
      margin: 10px;
      margin-left: 28px;
    }
    textarea {
      width: 90%;
      height: 80px;
      margin: 10px 0;
      margin-left: 50%;
      padding: 15px;
      transform: translate(-50%);
      border: 1px solid #dddddd;
      font-size: 26px;
      border-radius: 6px;
    }
    /deep/.van-cell__title span {
      color: black;
    }
    .location-box {
      width: 100%;
      display: flex;
      align-items: center;
      div {
        font-size: 28px;
        color: #999999;
      }
    }
    .van-uploader {
      margin-left: 20px;
    }
  }
  .btn {
    position: fixed;
    bottom: 10px;
    left: 50%;
    width: 90%;
    transform: translate(-50%);
  }
  .drag {
    position: fixed;
    bottom: 200px;
    right: 20px;
    padding: 10px;
    border-radius: 12px;
    background-color: #3982f6;
    color: #fff;
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      margin-left: 7px;
    }
  }
  .card2 {
    margin-top: 20px;
  }
  /deep/ .van-radio__label {
    color: #666666;
    font-size: 28px;
  }
  /deep/.van-cell__value {
    span {
      color: #666666;
    }
  }
  .confirm {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
  }
  /deep/ .van-icon-success {
    color: @primary;
  }

  /deep/.van-icon-success {
    background-color: rgba(225, 103, 18, 0.2);
    border: 1px solid @primary;
  }
  .radios {
    padding: 20px 30px;
    display: flex;
    flex-flow: wrap;
    .radio {
      margin-right: 10px;
    }
  }
  .otherIpt {
    margin-left: 20px;
    border: 1px solid #eee;
  }
  .images {
    margin-left: 30px;
  }
}
</style>